<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  >
    <div class="animate">
      <div class="animate_c">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="animate_c_c"></div>
      </div>
      <img class="ani_img" src="./img/u19.png" />
    </div>
    <Widget
      class="flex"
      :class="['justify-' + info.extension.justifyAlign.value, 'flex-' + info.extension.flexDer.value]"
      :list="info.list"
      :style="{
        alignItems: info.extension.itemsAlign.value,
      }"
    />
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiSpinningBall',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        timer: null,
      }
    },
  })
</script>
<style lang="scss">
  .uiSpinningBall {
    width: 100%;
    height: 100%;
    position: relative;
    @keyframes aniii {
      from {
        transform: rotateZ(0);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    .animate {
      width: 500px;
      height: 500px;
      position: absolute;
      top: 80px;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .ani_img {
        position: absolute;
        width: 120%;
        bottom: -45px;
        user-select: none;
      }
      .animate_c {
        width: 90%;
        height: 90%;
        border: 2px solid #013e61;
        box-shadow: 0 0 40px 10px #01475f inset;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        & > span {
          border: 15px solid #00d4db;
          position: absolute;
          &:first-child {
            top: 21%;
            left: 21%;
            border-color: #00d4db transparent transparent #00d4db;
          }
          &:nth-child(2) {
            top: 21%;
            right: 21%;
            border-color: #00d4db #00d4db transparent transparent;
          }
          &:nth-child(3) {
            bottom: 21%;
            left: 21%;
            border-color: transparent transparent #00d4db #00d4db;
          }
          &:nth-child(4) {
            bottom: 21%;
            right: 21%;
            border-color: transparent #00d4db #00d4db transparent;
          }
        }
        .animate_c_c {
          width: 75%;
          height: 75%;
          border: 2px solid #014760;
          box-shadow: 0 0 40px 40px #014760 inset;
          border-radius: 50%;
        }
      }
      &::before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 6px dashed #0f627b;
        border-radius: 50%;
        animation: aniii 20s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
    }
  }
</style>
